<!--
 *  
 *   -25 10:03:06
 *   -13 13:31:37
 *   
 *    
 *   \dami\src\pages\index\tabs.vue
-->
<template>
  <div class="tabs">
    <Card :bordered="false">
      <Tabs value="recommend">
        <TabPane label="今日推荐" name="recommend" class="tab">
          <Card
            v-for="item of recommend"
            :key="item.id"
            class="tab-item"
            :bordered="false"
          >
            <!-- <div
               
                :style="{ 'background-color': item.imgUrl }"
              ></div> -->
            <img
              :src="item.imgUrl"
              alt=""
              class="item-img"
              @click="detail(item)"
            />
            <p class="item-itemName">{{ item.itemName }}</p>
            <p class="item-price">票价： ￥{{ item.minPrice }}</p>
          </Card>
        </TabPane>

        <TabPane label="即将开售" name="willBeSale" class="tab">
          <Card
            v-for="item of willBeSale"
            :key="item.id"
            class="tab-item"
            :bordered="false"
          >
            <!-- <div
              class="item-img"
              :style="{ 'background-color': item.imgUrl }"
            ></div> -->
            <img
              :src="item.imgUrl"
              alt=""
              class="item-img"
              @click="detail(item)"
            />

            <p class="item-itemName">{{ item.itemName }}</p>
            <p class="item-price">票价： ￥{{ item.minPrice }}</p>
          </Card>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>
  
  <script>
export default {
  name: "Tab",
  data() {
    return {
      // recommend: this.recommend,
      recommend: [
        {
          id: 1,
          itemName: "河边的错误",
          imgUrl: require("@/assets/banner/1.png"),
          minPrice: 100,
        },
        {
          id: 1,
          itemName: "坚如磐石",
          imgUrl: require("@/assets/banner/2.png"),
          minPrice: 100,
        },
        {
          id: 1,
          itemName: "一个和四个",
          imgUrl: require("@/assets/banner/3.png"),
          minPrice: 100,
        },
        {
          id: 1,
          itemName: "无价之宝",
          imgUrl: require("@/assets/banner/4.png"),
          minPrice: 100,
        },
        {
          id: 1,
          itemName: "唐人街探案",
          imgUrl: require("@/assets/banner/5.png"),
          minPrice: 100,
        },
      ],
      willBeSale: [
        {
          id: 1,
          itemName: "河边的错误",
          imgUrl: require("@/assets/banner/1.png"),
          minPrice: 100,
        },
        {
          id: 1,
          itemName: "坚如磐石",
          imgUrl: require("@/assets/banner/2.png"),
          minPrice: 100,
        },
        {
          id: 1,
          itemName: "一个和四个",
          imgUrl: require("@/assets/banner/3.png"),
          minPrice: 100,
        },
        {
          id: 1,
          itemName: "无价之宝",
          imgUrl: require("@/assets/banner/4.png"),
          minPrice: 100,
        },
        {
          id: 1,
          itemName: "唐人街探案",
          imgUrl: require("@/assets/banner/5.png"),
          minPrice: 100,
        },
      ],
    };
  },
  methods: {
    detail(item) {
      console.log(item, "item");
      localStorage.setItem("itemInfo", JSON.stringify(item));
      this.$router.push({ name: "Detail" });
    },
    getTabData: function () {
      this.$http
        .getRequest({
          api: "tabs",
          data: {},
        })
        .then((res) => {
          // console.log(res)
          this.willBeSale = res.willbesale;
          this.recommend = res.recommend;
          // console.log(this.willBeSale)
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goDetail: function () {
      this.$toDetail();
    },
  },
  mounted() {
    // this.getTabData();
  },
};
</script>
  
  <style scoped>
.ivu-card-head p {
  height: 80px;
}
.tabs {
  margin-bottom: 50px;
}
.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab-item:hover {
  cursor: pointer;
}
.item-img {
  width: 150px;
  height: 200px;
  border: none;
}
.item-itemName,
.item-price {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 10px;
  font-size: 12px;
}
</style>>
  
  